<template>
  <h1>vue router</h1>
  <div>
    <button @click="goDemo">跳转页面</button>
    <!-- <router-link to="" tag="li"></router-link> -->
    <!-- <pre> {{ slotProp }}</pre> -->
   <!-- <RouterLink custom to="/fiveth/demo" v-slot="{navigate,route,href,isActive,isExactActive}" >
   <li :href="href" @click="navigate">跳页面</li>
  </RouterLink> -->
   <RouterLink custom :to="{name:'demo',params:{id:'001'}}" v-slot="{navigate,route,href,isActive,isExactActive}" >
   <li :href="href" @click="navigate">跳页面</li>
  </RouterLink>
  </div>
</template>
<script setup>
import { onBeforeRouteLeave, onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';


const router = useRouter()
const route = useRoute()

const goDemo = ()=>{
  router.push({name:'demo',query:{name:'zs',age:18}})
}

onBeforeRouteLeave(()=>{
  console.log('RouteLeave...');
})
onBeforeRouteUpdate(()=>{
  console.log('update....');
})
</script>

<!-- <script>
export default {
  beforeRouteEnter(){},
  beforeRouteUpdate(){},
  beforeRouteLeave(){}
}
</script> -->